<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情</title>
    <style>
        .table2 {
            background-color: palegreen;
        }
        .td1{
            background-color: pink;
        }
        h1{
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>订单详情</h1>
    <script>
        let adress = prompt('请输入你的地址')
        let price = prompt('请输入你的单价')
        let much = prompt('请输入你的数量')
        let total = price * much
        document.write(`
        <form>
            <table align='center' border="1" 
            cellspacing="0" cellpadding="0" 
            width="400" height="100" 
            align="center">
            <tr class='tr1'>
            <td class='td1'>商品名称</td>
            <td class='td1'>商品价格</td>
            <td class='td1'>商品数量</td>
            <td class='td1'>总价</td>
            <td class='td1'>收货地址</td>
            </tr>
            <tr class="table2">
            <td>华为matex5折叠屏</td>
            <td>${price}</td>
            <td>${much}</td>
            <td>${total}</td>
            <td>${adress}</td>
            </tr>
            </form>
            </table>`)
    </script>
</body>

</html>